//维保审批
var type_cost ='';
// 公司列表
ajax(api.company.list,{pagenum:9999},'post').done((res)=>{
    console.log(res);
    var arr= res.data;
    console.log(arr)
    var options ='<option value="">直接选择或搜索选择</option>';
    arr.forEach(key => {
        options +=`<option value='${key.company_id}'>${key.company_name}</option>`;
    });
 
    $('.company_id').html(options)
    form.render('select');
 })
 // 审批单位公司列表
ajax(api.company.list,{pagenum:9999},'post').done((res)=>{
    console.log(res);
    var arr= res.data;
    console.log(arr)
    var options ='<option value="">直接选择或搜索选择</option>';
    arr.forEach(key => {
        options +=`<option value='${key.company_name}'>${key.company_name}</option>`;
    });
 
    $('.approve_orgn').html(options)
    form.render('select');
 })

 //维保时间
laydate.render({
    elem: '#maintenance_time' //指定元素
    ,type:'datetime'
});
// 审批时间
laydate.render({
    elem: '#approve_time' //指定元素
    ,type:'datetime'
});



// 材料费用清单
var material=[[ //表头   
    {field: 'unit', title: '配件单位',minWidth: 140}
    ,{field: 'material_name', title: '配件名称',minWidth: 140}
    ,{field: 'material_type', title: '配件型号',minWidth: 110}  
    ,{field: 'supplier', title: '供应商',minWidth: 110}
    ,{field:'tel', title:'电话',minWidth: 110}
    ,{field:'num', title:'数量',width:80,}
    ,{field:'price', title:'单价',width:80}
    ,{field:'total', title:'总价',width:80}
    ,{ title: '操作',width:120, toolbar:'#barDemo',fixed: 'right',align:'center'}
 ]]
//  材料费用数据
var material_data=[
    {unit:'哈哈',material_name:'名称',material_type:'型号',supplier:"我",tel:1854545,num:1,price:120,total:120},
    {unit:'哈哈',material_name:'名称',material_type:'型号',supplier:"我",tel:1854545,num:1,price:120,total:120},
    {unit:'哈哈',material_name:'名称',material_type:'型号',supplier:"我",tel:1854545,num:1,price:120,total:120},
    
]
var material_html =`
<div style='padding:30px;'>
<div class="layui-btn-group" style="width: 100%;">
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="add">
        新增
    </button>
</div>
<div class="table_margin_0">
        <table class="" id="material" lay-filter="barDemo"></table>
</div>
</div>
`
var material_table=`
<div>
<form class="layui-form form-auto">
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">配件单位</label>
        <div class="layui-input-inline">
            <input type="text" name="unit" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">配件名称</label>
        <div class="layui-input-inline">
            <input type="text" name="material_name" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">配件型号</label>
        <div class="layui-input-inline">
            <input type="text" name="material_type"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">供应商</label>
        <div class="layui-input-inline">
            <input type="text" name="supplier" lay-verify="" autocomplete="off" class="layui-input">         
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" lay-verify="" autocomplete="off" class="layui-input">
        </div>
    </div>    
    <div class="layui-inline">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-inline">
            <input type="text" name="num" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">单价</label>
        <div class="layui-input-inline">
            <input type="text" name="price" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-input-block">
        <button type="button" style="margin:0 auto;display: inline-block;" class="layui-btn layui-btn-normal keep" lay-submit=""
            lay-filter="cost_save">保存</button>
    </div>
</div>
</form>
</div>
`

$('.material_cost').on('click',()=>{
    type_cost ='material'
    layer.open({
        type: 1,
        title: '材料费用信息',
        closeBtn: 1,
        area: [ '80%' , '700px'],
        shadeClose: true,
        content: material_html
      });

      table.render({
        elem: '#material',
        cols: material,
        data: material_data,
        limit: 10,
        cellMinWidth: 80
    });
        // 操作
        table.on('tool(barDemo)', function (obj) {
            var data1 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') {
                console.log(data1)
               var materials= layer.open({
                    type: 1,
                    title: '材料费用信息详情',
                    closeBtn: 1,
                    area: [ '50%' , '500px'],
                    shadeClose: true,
                    content: material_table,
                    success:function(layero, index){
                        console.log(layero, index);
                        for(var key in data1){
                            $('input[name='+key+']').val(data1[key])
                        }
                    }
                  });
                            // 费用表单提交
        form.on('submit(cost_save)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            material_data.push(data.field);
            console.log(material_data)
            layer.close(materials);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
               form.render();
            } else if (layEvent === 'del') {
                layer.confirm('是否删除', function (index) {
                         tr.css('display','none')
                        console.log('已删除')
                        layer.close(index);
                    })
                }
            })
    $('#add').on('click',()=>{
        var materials = layer.open({
            type: 1,
            title: '材料费用信息详情',
            closeBtn: 1,
            area: [ '50%' , '500px'],
            shadeClose: true,
            content: material_table
          });
                 // 费用表单提交
                 form.on('submit(cost_save)', function (data) {
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    material_data.push(data.field);
                    console.log(material_data)
                    table.render({
                        elem: '#material',
                        cols: material,
                        data: material_data,
                        limit: 10,
                        cellMinWidth: 80
                    });
                    layer.close(materials);
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
    })
})

//工时费用信息

// 工时费用清单
var working=[[ //表头   
    {field: 'working_name', title: '维修项目',minWidth: 140}
    ,{field: 'price', title: '工时单价',minWidth: 140}
    ,{field: 'hour', title: '工时数',minWidth: 110}  
    ,{field: 'total', title: '合计',minWidth: 110}
    ,{ title: '操作',width:120, toolbar:'#barDemo',fixed: 'right',align:'center'}
 ]]
//  工时费用数据
var working_data=[
    {working_name:'哈哈',price:50,hour:2,total:100},
    {working_name:'哈哈',price:50,hour:2,total:100},
    {working_name:'哈哈',price:50,hour:2,total:100},
]
var working_html =`
<div style='padding:30px;'>
<div class="layui-btn-group" style="width: 100%;">
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="add">
        新增
    </button>
</div>
<div class="table_margin_0">
        <table  id="working" lay-filter="barDemo"></table>
</div>
</div>
`
var working_table=`
<div>
<form class="layui-form form-auto">
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">维修项目</label>
        <div class="layui-input-inline">
            <input type="text" name="working_name" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">工时单价</label>
        <div class="layui-input-inline">
            <input type="text" name="price" autocomplete="off" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">工时数</label>
        <div class="layui-input-inline">
            <input type="text" name="hour" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-input-block">
        <button type="button" style="margin:0 auto;display: inline-block;" class="layui-btn layui-btn-normal keep" lay-submit=""
            lay-filter="cost_save">保存</button>
    </div>
</div>
</form>
</div>
`

$('.working_hours').on('click',()=>{
    type_cost ='working'
    layer.open({
        type: 1,
        title: '工时费用信息',
        closeBtn: 1,
        area: [ '80%' , '700px'],
        shadeClose: true,
        content: working_html
      });

      table.render({
        elem: '#working',
        cols: working,
        data: working_data,
        limit: 10,
        cellMinWidth: 80
    });
        // 操作
        table.on('tool(barDemo)', function (obj) {
            var data1 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log('caizuo')
            if (layEvent === 'edit') {
                console.log(data1)
               var workings= layer.open({
                    type: 1,
                    title: '工时费用信息详情',
                    closeBtn: 1,
                    area: [ '50%' , '500px'],
                    shadeClose: true,
                    content: working_table,
                    success:function(layero, index){
                        console.log(layero, index);
                        for(var key in data1){
                            $('input[name='+key+']').val(data1[key])
                        }
                    }
                  });
                          // 费用表单提交
        form.on('submit(cost_save)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            working_data.push(data.field);
            console.log(working_data)
            layer.close(workings);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
               form.render();
            } else if (layEvent === 'del') {
                layer.confirm('是否删除', function (index) {
                      tr.css('display','none')
                        console.log('已删除')
                        layer.close(index);
                    })
                }
            })
    $('#add').on('click',()=>{
     var workings= layer.open({
            type: 1,
            title: '工时费用信息详情',
            closeBtn: 1,
            area: [ '50%' , '500px'],
            shadeClose: true,
            content: working_table
          });
          // 费用表单提交
        form.on('submit(cost_save)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            working_data.push(data.field);
            console.log(working_data)
            layer.close(workings);
            table.render({
                elem: '#working',
                cols: working,
                data: working_data,
                limit: 10,
                cellMinWidth: 80
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })
})

// 表单提交
form.on('submit(save)', function (data) {
    Load()
    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    var approve = true;
    var id = '{$Think.get.id}';
    if (approve) {      
        data.field.car_maintenance_id = id;
        data.field.material_cost_info = material_data;
        data.field.working_hours = working_data;
        ajax(api.service.editApprove, data.field, 'post').done(function (res) {
            console.log(res)
            Load(1)
            if (res.code == 1) {
                Msg('编辑成功')
                window.location.href = '{:url("/html/plus/service")}'
            } else {
                Err(res.msg)
            }
        }).fail(function (err) {
            Err('请求失败')
        });
    } else {
        data.field.car_maintenance_id = id;
        data.field.material_cost_info = material_data;
        data.field.working_hours = working_data;
        ajax(api.service.addApprove, data.field, 'post').done(function (res) {
            console.log(res)
            Load(1)
            if (res.code == 1) {
                Msg('添加成功')
                window.location.href = '{:url("/html/plus/service")}'
            } else {
                Err(res.msg)
            }
        }).fail(function (err) {
            Err('请求失败')
        });
    }
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});